import { state, style, transition, animate, group, AnimationMetadata } from '@angular/animations';
import { MotionDuration, MotionFunc } from '../core/animation/api';

// NEED_DO: 根据抽屉的宽度变更动画时长
export const drawerAnimations: AnimationMetadata[] = [
  state(
    'drawerLeftIn',
    style({
      transform: 'translateX(0%)',
      opacity: 1,
    }),
  ),
  state(
    'drawerLeftOut',
    style({
      transform: 'translateX(-101%)',
      opacity: 0,
    }),
  ),
  state(
    'drawerRightIn',
    style({
      transform: 'translateX(0%)',
      opacity: 1,
    }),
  ),
  state(
    'drawerRightOut',
    style({
      transform: 'translateX(100%)',
      opacity: 0,
    }),
  ),
  state(
    'drawerTopIn',
    style({
      transform: 'translateY(0%)',
      opacity: 1,
    }),
  ),
  state(
    'drawerTopOut',
    style({
      transform: 'translateY(-100%)',
      opacity: 0,
    }),
  ),
  state(
    'drawerBottomIn',
    style({
      transform: 'translateY(0%)',
      opacity: 1,
    }),
  ),
  state(
    'drawerBottomOut',
    style({
      transform: 'translateY(100%)',
      opacity: 0,
    }),
  ),
  transition('drawerLeftOut => drawerLeftIn', [
    group([
      animate(
        `${MotionDuration.LG} ${MotionFunc.EASE_OUT}`,
        style({
          transform: 'translateX(0%)',
        }),
      ),
      animate(
        `${MotionDuration.LG} ${MotionFunc.EASE_IN_OUT}`,
        style({
          opacity: 1,
        }),
      ),
    ]),
  ]),
  transition('drawerLeftIn => drawerLeftOut', [
    group([
      animate(
        `${MotionDuration.MD} ${MotionFunc.EASE_IN}`,
        style({
          transform: 'translateX(-101%)',
        }),
      ),
      animate(
        `${MotionDuration.MD} ${MotionFunc.EASE_IN_OUT}`,
        style({
          opacity: 0,
        }),
      ),
    ]),
  ]),
  transition('drawerRightOut => drawerRightIn', [
    group([
      animate(
        `${MotionDuration.LG} ${MotionFunc.EASE_OUT}`,
        style({
          transform: 'translateX(0%)',
        }),
      ),
      animate(
        `${MotionDuration.LG} ${MotionFunc.EASE_IN_OUT}`,
        style({
          opacity: 1,
        }),
      ),
    ]),
  ]),
  transition('drawerRightIn => drawerRightOut', [
    group([
      animate(
        `${MotionDuration.MD} ${MotionFunc.EASE_IN}`,
        style({
          transform: 'translateX(100%)',
        }),
      ),
      animate(
        `${MotionDuration.MD} ${MotionFunc.EASE_IN_OUT}`,
        style({
          opacity: 0,
        }),
      ),
    ]),
  ]),
  transition('drawerTopOut => drawerTopIn', [
    group([
      animate(
        `${MotionDuration.LG} ${MotionFunc.EASE_OUT}`,
        style({
          transform: 'translateY(0%)',
        }),
      ),
      animate(
        `${MotionDuration.LG} ${MotionFunc.EASE_IN_OUT}`,
        style({
          opacity: 1,
        }),
      ),
    ]),
  ]),
  transition('drawerTopIn => drawerTopOut', [
    group([
      animate(
        `${MotionDuration.MD} ${MotionFunc.EASE_IN}`,
        style({
          transform: 'translateY(-100%)',
        }),
      ),
      animate(
        `${MotionDuration.MD} ${MotionFunc.EASE_IN_OUT}`,
        style({
          opacity: 0,
        }),
      ),
    ]),
  ]),
  transition('drawerBottomOut => drawerBottomIn', [
    group([
      animate(
        `${MotionDuration.LG} ${MotionFunc.EASE_OUT}`,
        style({
          transform: 'translateY(0%)',
        }),
      ),
      animate(
        `${MotionDuration.LG} ${MotionFunc.EASE_IN_OUT}`,
        style({
          opacity: 1,
        }),
      ),
    ]),
  ]),
  transition('drawerBottomIn => drawerBottomOut', [
    group([
      animate(
        `${MotionDuration.MD} ${MotionFunc.EASE_IN}`,
        style({
          transform: 'translateY(100%)',
        }),
      ),
      animate(
        `${MotionDuration.MD} ${MotionFunc.EASE_IN_OUT}`,
        style({
          opacity: 0,
        }),
      ),
    ]),
  ]),
];
